﻿@page "/range-slider/tooltip"

@using Syncfusion.Blazor.Inputs;
@using Syncfusion.Blazor.DropDowns;
@using SFInputs = Syncfusion.Blazor.Inputs
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the rendering of Slider component with Tooltip. Drag the thumb over the bar for
        selecting the values between Min and Max to enable the Tooltip.</p>
</SampleDescription>
<ActionDescription>
    <p>
    <p>Slider component displays the Tooltip to indicate the current value to the user.</p>
    <p>In this demo, we have demonstrated Tooltip with <code>Default</code> and <code>Range Slider</code>.</p>
    <p>Buttons can be used to increase or decrease the slider value. Buttons can be enabled in Slider using the 
        <code>ShowButtons</code> property.</p>
    <p>Tooltip's position and opening behavior can be customized through the <code>Placement</code> and
        <code>ShowOn</code> properties from property pane.</p>
    <p>The dragInterval is used to drag both handles using the range bar which is also applicable only to the Range
        Slider.</p>
    </p>
</ActionDescription>

<div class="col-lg-8 control-section">
    <div class="content-wrapper">
        <div class="sliderwrap">
            <label class="userselect">Default Slider</label>
            <SfSlider @bind-Value="@Default" ShowButtons="true">
                <SliderTooltip IsVisible="true" Placement="TooltipPlacement.After" ShowOn="TooltipShowOn.Always">
                </SliderTooltip>
            </SfSlider>
        </div>
        <div class="sliderwrap">
            <label class="userselect">Range Slider</label>
            <SfSlider Type=SliderType.Range @bind-Value="@Range" ShowButtons="true">
                <SliderTooltip IsVisible="true" Placement="TooltipPlacement.Before" ShowOn="TooltipShowOn.Always">
                </SliderTooltip>
            </SfSlider>
        </div>
    </div>
</div>

@code{
    int Default = 30;
    int[] Range = new int[] { 30, 70 };
}

<style>
    .content-wrapper {
        width: 52%;
        margin: 0 auto;
        min-width: 185px;
    }

    .sliderwrap {
        margin-top: 45px;
        margin-left: -20%;
    }

    .sliderwrap label {
        padding-bottom: 26px;
        font-size: 13px;
        font-weight: 500;
        margin-top: 15px;
    }

    .userselect {
        -webkit-user-select: none; /* Safari 3.1+ */
        -moz-user-select: none; /* Firefox 2+ */
        -ms-user-select: none; /* IE 10+ */
        user-select: none; /* Standard syntax */
    }
</style>
